<mat-toolbar>
  <button mat-icon-button (click)="settings()">
    <mat-icon>settings</mat-icon>
  </button>
  <span>Consul Helper</span>
  <span fxFlex></span>
  <button mat-icon-button color="accent" (click)="refresh()">
    <mat-icon>refresh</mat-icon>
  </button>
</mat-toolbar>


<table mat-table [dataSource]="dataSource" [trackBy]="trackBy" class="mat-elevation-z3">

  <ng-container matColumnDef="index">
    <th mat-header-cell *matHeaderCellDef> No.</th>
    <td mat-cell *matCellDef="let i=index"> {{i + 1}} </td>
  </ng-container>

  <ng-container matColumnDef="id">
    <th mat-header-cell *matHeaderCellDef> ID</th>
    <td mat-cell *matCellDef="let element"> {{element.ID}} </td>
  </ng-container>

  <ng-container matColumnDef="address">
    <th mat-header-cell *matHeaderCellDef> Address</th>
    <td mat-cell *matCellDef="let element"> {{element.Address}}:{{element.Port}} </td>
  </ng-container>

  <ng-container matColumnDef="state">
    <th mat-header-cell *matHeaderCellDef> State</th>
    <td mat-cell *matCellDef="let element">
      <mat-progress-spinner mode="indeterminate" color="primary" diameter="20"
                            matTooltip="健康检查..." *ngIf="!element.healthCheck?.isDone"
                            (click)="log(element.healthCheck)">
      </mat-progress-spinner>

      <span *ngIf="element.healthCheck?.isDone">{{element.state}}</span>
    </td>
  </ng-container>

  <ng-container matColumnDef="op">
    <th mat-header-cell *matHeaderCellDef>
      <div fxLayout="row">
        <span fxFlex></span>
        <span style="margin-right: 12px">OP</span>
      </div>
    </th>
    <td mat-cell *matCellDef="let element">
      <div fxLayout="row">
        <span fxFlex></span>
        <button mat-icon-button color="accent" matTooltip="移除服务"
                (click)="confirmDeregister(element.ID)">
          <mat-icon>clear</mat-icon>
        </button>
      </div>
    </td>
  </ng-container>

  <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>

<!--<button mat-button mat-raised-button (click)="refresh()">刷新</button>-->
